<template>
              <div>
                  <div class = "left-box">
                        <el-date-picker type="date" v-model="dateFrom" style="width: 150px;" size="mini" class="lf choose-input"></el-date-picker>
                            <div class="lf choose-title choose-input">至</div>
                         <el-date-picker type="date" v-model="dateTo" style="width: 150px;" size="mini" class="lf"></el-date-picker>
                <div class = "tps">
                <el-row class=" ">
                    <el-col :span="24">
                          <el-radio-group v-model="checkChoose" class="check-container" >
                            <el-radio class = "radio" :label="1" >正常班</el-radio>
                            <el-radio class = "radio" :label="2">隔日班</el-radio>
                            <el-radio class = "radio" :label="3">按周</el-radio>
                            <el-radio class = "radio" :label="4">按月</el-radio>
                            <el-radio class = "radio" :label="5">农历</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                </div>
                <div class = "show-eara">
                <div v-show = "checkChoose == 1" class = "tab1">
                      <p class = "title-mar">{{"正常班：按顺序每日轮换。"}}</p> 
                </div>
               <div v-show = "checkChoose == 2" class = "">
                         <p class = "title-mar">隔日班：每隔X天套用下一个轮换设置。</p>
                         <span class = "mar-left">间隔</span>
                         <el-input style = "width:20%" v-model="day"></el-input>
                         <span>天</span>
                </div>
                <div v-show = "checkChoose == 3">
                   <!-- 选框 -->
                             <el-checkbox v-model="checkStart">星期一</el-checkbox>
                             <el-checkbox v-model="checkPei">星期二</el-checkbox>
                             <el-checkbox v-model="checkAllow">星期三</el-checkbox>
                             <el-checkbox v-model="checkAddClass">星期四</el-checkbox>
                                <br>
                              <el-checkbox v-model="checkCarTime">星期五</el-checkbox>
                              <el-checkbox v-model="checkPintSeat">星期六</el-checkbox>
                              <el-checkbox v-model="checkClassNum">星期天</el-checkbox>
                   </div>
                 <div v-show = "checkChoose == 4">
                     <el-radio-group>
                            <el-checkbox v-model="checkStart">全选</el-checkbox>
                             <el-checkbox v-model="checkPei">反选</el-checkbox>
                             <el-checkbox v-model="checkAllow">奇数日</el-checkbox>
                             <el-checkbox v-model="checkAddClass">偶数日</el-checkbox>
                              <br>
                    </el-radio-group>
                              <el-radio-group v-model="checkTime" >
                               <el-checkbox v-model="checkCarTime" v-for = "(item,index) in 31" class = "mountd">{{index + 1}}</el-checkbox>
                    </el-radio-group>
                   </div>
                    <div v-show = "checkChoose == 5">
                            <!-- <el-checkbox v-model="checkStart">启用</el-checkbox>
                             <el-checkbox v-model="checkPei">配客</el-checkbox>
                             <el-checkbox v-model="checkAllow">允许远程售票</el-checkbox>
                             <el-checkbox v-model="checkAddClass">不加班</el-checkbox>
                                <br>
                              <el-checkbox v-model="checkCarTime">打印发车时间</el-checkbox>
                              <el-checkbox v-model="checkPintSeat">打印座位号</el-checkbox>
                              <el-checkbox v-model="checkClassNum">打印班次号</el-checkbox> -->
                              wating..
                   </div>   
                   </div>         
                   <div class = "ps">       
                   <span>备注:</span>   
                   <el-input type = "texteara" style = "width:90%"> </el-input>
                   </div>
            </div>
            <div class = "right-box">
                 <div class = "head-title">
                      <span>轮换</span>
                 </div>
                <ul class = "list-data">
                    <li>车牌号</li>
                    <li>可售数</li>
                    <li>状态</li>
                    <li><img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" >添加</div></li>                    
                </ul>
                <ul class = "input-value">
                    <li>
                        <div class = "number"><span>{{"1"}}</span></div>
                    </li>
                    <li>
                        <el-input type = "text" style = "width:80px;"></el-input>
                    </li>
                      <li>
                        <el-input style = "margin-left:50px;"></el-input>
                    </li>
                     <li>
                           <el-select v-model="addCarType" placeholder="请选择" size="mini" style="width:140px;margin-left:50px" class="lf choose-input">
                                                    <el-option>
                                                    </el-option>
                            </el-select>
                    </li>
                    <li>
                         <div class="" style = "margin-left: 160px; font-size:30px;color:red;">x</div>
                    </li>
                </ul>
            </div>
        </div>
</template>
<script>
export default {
    data(){
    return{
       checkChoose:1,
       checkTime:'',
       dateFrom:'',
       dateTo:'',
       day:'',
       checkCarTime:'',
       checkStart:'',
       checkPei:'',
       checkAllow:'',
       addCarType:'',
       checkAddClass:'',
       checkPintSeat:'',
       checkClassNum:'',
       carTable: [
        {
          page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            page: true,
            stripe: true,
            menu: false,
            expand:true,
            align: "center",
            menuAlign: "center",
            highlightCurrentRow:true,
            column: []
          }
        }
      ],
    };
    },
    props:{

    },
    methods:{
       
    },
}
</script>

<style scoped>
.number{
    float: left;
    background: #C3C3C3;
    width:40px;
    height:40px;
    color:#f1f1f1;
    line-height: 40px;
    text-align: center;
}
.lf{
    vertical-align: bottom;
    line-height: 15px;
}
.left-box{
    width:380px;
    float:left;
}
    .tps{
         border-bottom:1px solid #E9EAEC; 
         padding-bottom:5px;
    }
    .check-container{
        background: #F8F8F9;
        border: 1px solid #E9EAEC; 
        height:40px;
        float:left;
        line-height: 40px;
        width:100%;
    }
    .check-container >>> .radio {
        width:40px;  
    }
    .check-container ::before{
        content: ' ';
    }
    .show-eara{
        width:100%;
        height:240px;
        background: #F8F8F9;
        border: 1px solid #E9EAEC;
    }
    .title-mar{
        margin:30px;
    }
    .mar-left{
        margin-left:30px;
    }
    .mountd{
      margin:10px 5px;
      width:15px;
      margin-left:30px;
    }
    .ps{
        margin:15px 0px;
    }
    .right-box{
        float:right;
    }
    .head-title{
        width:380px;
        height:32px;
        background: #F8F8F9;
        border: 1px solid #E9EAEC;
        text-align: center;
        line-height: 32px;
    }
    .list-data{
        margin-left:40px;
        margin-top:20px;
        }
    .list-data li{
        float:left;
        margin-right:40px;
    }
    .input-value {
      /* display: inline-block; */
      float:left;
      margin:10px 0px;
    }
    .input-value li{
        width:40px;
        float:left;
        margin-right:5px;
    }
</style>

